{% stylesheet %}
.graphic-warp {
    margin: 0 auto;
    max-width: var(--general_layout_width);
}

.graphic-warp .graphic-list {
    display: grid;
    flex-wrap: wrap;
    -moz-column-gap: 30px;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 30px;

}
.graphic-warp .graphic-list .graphic-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.graphic-warp .graphic-list .graphic-item > .graphic-item-img{
    width: 100%;
}
.graphic-warp .graphic-list .graphic-item .graphic-item-image {
    vertical-align: top;
    width: 100%;
    height: auto;
    margin-bottom: 30px;
}

.graphic-warp .graphic-list .graphic-item .graphic-item-title {
    display: block;
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--title_color);
    font-size: var(--product_font_size);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width:100%;
}

.graphic-warp .graphic-list .graphic-item .graphic-item-des {
    margin-bottom: 10px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    color: var(--detail_color);
}

.graphic-warp .graphic-list .graphic-item .graphic-item-more {
    font-weight: 400;
    color: #1d1f21;
    font-size:14px;
    line-height: 24px;
    margin-top: 20px;
}

.graphic-warp.graphic-font-left .graphic-item {
    align-items: flex-start;
    text-align: left;
}
.graphic-warp.graphic-font-right .graphic-item {
    align-items: flex-end;
    text-align: right;
}

.graphic-warp.graphic-font-center .graphic-item {
    align-items: center;
    text-align: center;
}

.graphic-warp.graphic-font-rigth .graphic-item {
    align-items: flex-end;
}
@media screen and (max-width: 767px) {

    .graphic-warp .graphic-list{
        grid-template-columns: 1fr;
    }
    .graphic-warp .graphic-list .graphic-item .graphic-item-image{
        margin-bottom: 20px;
    }
}
{% endstylesheet %}
<div class="graphic-warp graphic-font-{{ section.settings.text_position }}">
  <div class="container_wrapper">
    {% if section.settings.title != '' or section.settings.detail != '' %}
    <div class="block_title">
        {% if section.settings.title != '' %}<h2>{{ section.settings.title }}</h2>{% endif %}
        {% if section.settings.detail != '' %}<div class="block_detail">{{ section.settings.detail }}</div>{% endif %}
    </div>
    {% endif %}
    <div class="graphic-list">
        {% for block in section.blocks %}
        <div class="graphic-item">
            <a  class="graphic-item-img" href="{% if block.link.url %}{{ block.link.url | append: '?data_from=' | append: data_from }}{% else %}javascript:;{%endif%}" data-tips="请选择图片链接"><img class="graphic-item-image" data-src="{{ block.image.src }}" src="{{ 'empty.png' | public_asset_abs_url }}"  alt="{{ block.image.alt }}"></a>
            <a class="graphic-item-title" href="{% if block.link.url %}{{ block.link.url | append: '?data_from=' | append: data_from }}{% else %}javascript:;{%endif%}">{{ block.title }}</a>
            <div class="graphic-item-des">{{ block.content }}</div>
        </div>
        {% endfor %}
    </div>
  </div>
</div>


{% schema %}
{
  "tag": "",
  "class": "block_image_text_list",
  "is_global": false,
  "name": {
    "zh_CN": "图文列表"
  },
  "max_blocks": "20",
  "settings": [
    {
      "type": "card_header",
      "label": {
        "zh_CN": "设置"
      }
    },
    {
      "type": "card_input",
      "label": {
        "zh_CN": "标题"
      },
      "id": "title"
    },
    {
      "type": "card_text_editor",
      "label": {
        "zh_CN": "简短描述"
      },
      "id": "detail"
    },
    {
      "type": "card_select",
      "label": {
        "zh_CN": "文字对齐方式"
      },
      "id": "text_position",
      "option": [
        {
          "label": {
            "zh_CN": "左对齐"
          },
          "value": "left"
        },
        {
          "label": {
            "zh_CN": "居中"
          },
          "value": "center"
        },
        {
          "label": {
            "zh_CN": "右对齐"
          },
          "value": "right"
        }
      ],
      "default": "left"
    }
  ],
  "blocks": [
    {
      "name": {
        "zh_CN": "图文"
      },
      "type": "graphic-item",
      "settings": [
        {
          "type": "card_image",
          "label": {
            "zh_CN": "选择图片"
          },
          "default": {
            "src": "",
            "alt": ""
          },
          "info": {
        "zh_CN": "常用比例4:3、3:2、2:1、1:1，宽度1000px以上,高度可自适应"
      },
          "id": "image"
        },
        {
          "type": "card_input",
          "label": {
            "zh_CN": "标题"
          },
          "id": "title",
          "default": "IMAGE TITLE"
        },
        {
          "type": "card_textarea",
          "label": {
            "zh_CN": "内容"
          },
          "default": "Tell your brand's story through",
          "id": "content"
        },
        {
          "type": "card_page_link",
          "label": {
            "zh_CN": "跳转链接"
          },
          "default": {
            "type": "",
            "title": "",
            "url": ""
          },
          "id": "link"
        }
      ]
    }
  ],
  "default": {
    "settings": {
      "title": "Text Columns With Images",
      "detail": "",
      "text_position": "center"
    },
    "blocks": [
      {
        "image": {
          "src": "",
          "alt": ""
        },
        "title": "IMAGE TITLE",
        "content": "Tell your brand's story through",
        "link": {
          "type": "",
          "title": "",
          "url": ""
        },
        "block_type": "graphic-item"
      },
      {
        "image": {
          "src": "",
          "alt": ""
        },
        "title": "IMAGE TITLE",
        "content": "Tell your brand's story through",
        "link": {
          "type": "",
          "title": "",
          "url": ""
        },
        "block_type": "graphic-item"
      },
      {
        "image": {
          "src": "",
          "alt": ""
        },
        "title": "IMAGE TITLE",
        "content": "Tell your brand's story through",
        "link": {
          "type": "",
          "title": "",
          "url": ""
        },
        "block_type": "graphic-item"
      }
    ]
  }
}

{% endschema %}